<template>
  <div ref="lyricbox" class="lyric-box">
    <!-- <div class="icon">

        </div> -->

    <!-- 当前歌曲的位置标志 -->
    <!-- <div class="mark-line"></div> -->

    <div class="lyric-list">
      <ul :style="{ marginTop: currentHeight + 'px' }">
        <li
          ref="lyric"
          class="lyric"
          v-for="(lyric, i) in formatLyric"
          :key="i"
          :class="{ active: currentLyric === lyric }"
        >
          {{ lyric.text }}
        </li>
        <!-- <li ref="locatin" class="mark-line"></li> -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["formatLyric", "currentLyric"],

  data() {
    return {
      currentHeight: 0,
    };
  },

  components: {},

  created() {
    this.$nextTick(() => {
      this.scrollLyric(this.currentLyric);
    });
  },

  watch: {
    currentLyric(newLyric) {
      this.scrollLyric(newLyric);
    },
  },

  computed: {},

  methods: {
    test() {
      console.log(this);
    },

    scrollLyric(newLyric) {
      let i = this.formatLyric.indexOf(newLyric);

      let h = this.$refs.lyric
        ?.slice(0, i)
        .reduce((totle, elem) => totle + Number(elem.offsetHeight), 0);

      this.currentHeight = this.$refs.lyricbox.offsetHeight / 2 - h;
    },
  },
};
</script>
<style lang='scss' scoped>
.lyric-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100%;

  font-size: 16px;

  .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;

    background-color: rgba(90, 90, 90, 0.234);
    box-sizing: border-box;
  }

  .lyric-list {
    margin-top: 40px;
    overflow: hidden;
  }

  ul {
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
  }

  .lyric {
    padding: 8px 0;

    font-weight: 300;
    color: #ddd;

    &.active {
      font-weight: 500;
      color: #fff;
    }
  }

  .mark-line {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    height: 20px;
    background-color: rgba(128, 128, 128, 0.325);
  }
}
</style>